<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue';
import { useScrollToTop } from '@/vivid-ui/utils/useScroll';

const footerLinks = [
  {
    title: '文档',
    links: [
      { id: 'home', text: '首页', name: 'home' },
      { id: 'features', text: '特性', name: 'home' },
      { id: 'components', text: '组件', name: 'component-overview' }
    ]
  },
  {
    title: '资源',
    links: [
      { id: 'start', text: '快速开始', name: 'quick-start' },
      { text: 'GitHub', name: 'home' },
      { text: '更新日志', name: 'home' }
    ]
  },
  {
    title: '帮助',
    links: [
      { text: '常见问题', name: 'home' },
      { text: '反馈', name: 'home' },
      { text: '联系我们', name: 'home' }
    ]
  }
]
const socialIcons = [
  { name: 'github', icon: defineAsyncComponent(() => import('@/components/icons/GithubIcon.vue')) },
  { name: 'ins', icon: defineAsyncComponent(() => import('@/components/icons/InstagramIcon.vue')) },
  { name: 'youtube', icon: defineAsyncComponent(() => import('@/components/icons/YouTubeIcon.vue')) },
  { name: 'discord', icon: defineAsyncComponent(() => import('@/components/icons/DiscordIcon.vue')) }
]
const currentYear = computed(() => new Date().getFullYear())
const { scrollToTop } = useScrollToTop()

</script>
<template>
  <footer class="vivid-footer">
    <div class="footer-content">
      <div class="footer-logo">
        <span class="logo-text">Vivid</span>
        <span class="logo-ui">UI</span>
      </div>
      <div class="footer-links">

        <div class="link-group" v-for="group in footerLinks" :key="group.title">
          <h4>{{ group.title }}</h4>
          <div class="cursor-pointer" v-for="link in group.links" :key="link.text"
            @click="$router.push({ name: link.name }); scrollToTop()">
            {{ link.text }}
          </div>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p>© {{ currentYear }} VividUI. All rights reserved.</p>
      <div class="social-icons">
        <div v-for="icon in socialIcons" :key="icon.name">
          <component :is="icon.icon" />
        </div>
      </div>
    </div>
  </footer>
</template>


<style scoped>
.vivid-footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  flex-shrink: 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.logo-text {
  color: var(--primary-color);
}

.logo-ui {
  color: var(--accent-color);
}

.footer-links {
  display: flex;
  margin-top: 20px;
  gap: 4rem;
}

.link-group h4 {
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.link-group a {
  display: block;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  transition: var(--transition);
}

.link-group a:hover {
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 2rem auto 0;
  padding-top: 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.social-icons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
</style>
